<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新经资讯后台管理</title>
	<link rel="stylesheet" type="text/css" href="../../static/admin/css/reset.css">
	<link rel="stylesheet" type="text/css" href="../../static/admin/css/main.css">
	<script type="text/javascript" src="../../static/admin/js/echarts.min.js"></script>
</head>
<body>
    <div class="breadcrub">
        当前位置：用户管理>用户统计
    </div>
    <div class="spannels">
        <div class="spannel scolor01">
            <em>{{ total_count }}</em><span>人</span>
            <b>用户总数</b>
        </div>
        <div class="spannel scolor02">
            <em>{{ month_count }}</em><span>人</span>
            <b>用户月新增数</b>
        </div>
        <div class="spannel2 scolor03">
            <em>{{ day_count }}</em><span>人</span>
            <b>用户日新增数</b>
        </div>
    </div>

    <div class="pannel">
        <div id="chart_show" class="chart_show"></div>
    </div>
    <script>
        var oChart = echarts.init(document.getElementById('chart_show'));
        var chartopt = {
                        title:{
                            text: '30天用户新增数量',
                            left: 'center',
                            top: '10'
                        },
                        tooltip:{
                            trigger: 'axis'
                        },
                        legend: {
                            data:['active'],
                            top: '40'
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                magicType : {show: true, type: ['line','bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        xAxis : [
                            {
                                name: '今天',
                                type : 'category',
                                boundaryGap : false,
                                // data : ["2018-05-10","2018-05-11","2018-05-12","2018-05-13","2018-05-14","2018-05-15","2018-05-16", "2018-05-17","2018-05-18","2018-05-19","2018-05-20","2018-05-21","2018-05-22","2018-05-23", "2018-05-24","2018-05-25","2018-05-26","2018-05-27","2018-05-28","2018-05-29","2018-05-30", ,"2018-05-28","2018-05-29","2018-05-30","2018-05-28","2018-05-29","2018-05-30","2018-05-31","2018-06-01","2018-06-02","2018-06-03","2018-06-04","2018-06-05", "2018-06-06","2018-06-07","2018-06-08","2018-06-09"]
                                data : {{ date_li|safe }}
                            }
                        ],
                        yAxis : [
                            {
                                name: '新增用户数量',
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'active',
                                type:'line',
                                smooth:true,
                                itemStyle: {normal: {areaStyle: {type: 'default'}, color: '#f80'}, lineStyle: {color: '#f80'}},
                                // data:[10,8,9,12,13,10,5,3,2,20,11,23,10,8,9,12,13,10,5,3,2,20,11,23,10,8,9,12,13,10,5,10,8,9,12, 12,13,10,5]
                                data: {{ day_counts }}
                            }],
                        areaStyle:{
                                normal:{
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(255,136,0,0.39)'
                                    }, {
                                        offset: .34,
                                        color: 'rgba(255,180,0,0.25)'
                                    },{
                                        offset: 1,
                                        color: 'rgba(255,222,0,0.00)'
                                    }])

                                }
                            }

                        };
            oChart.setOption(chartopt);
    </script>
</body>
</html>